<template>
  <div class="HelloWorldByTemplate">
    <h1>{{ msg }}</h1>

    <template v-if="config.isShowLink">
      <p>
        For a guide and recipes on how to configure / customize this project,
        <br />
        check out the
        <a href="https://cli.vuejs.org" target="_blank" rel="noopener">
          vue-cli documentation
        </a>
        .
      </p>
      <h3>Installed CLI Plugins</h3>
      <ul>
        <li>
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
            target="_blank"
            rel="noopener"
          >
            babel
          </a>
        </li>
        <li>
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
            target="_blank"
            rel="noopener"
          >
            router
          </a>
        </li>
        <li>
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
            target="_blank"
            rel="noopener"
          >
            vuex
          </a>
        </li>
        <li>
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
            target="_blank"
            rel="noopener"
          >
            eslint
          </a>
        </li>
        <li>
          <a
            href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
            target="_blank"
            rel="noopener"
          >
            typescript
          </a>
        </li>
      </ul>
      <h3>Essential Links</h3>
      <ul>
        <li>
          <a href="https://vuejs.org" target="_blank" rel="noopener">
            Core Docs
          </a>
        </li>
        <li>
          <a href="https://forum.vuejs.org" target="_blank" rel="noopener">
            Forum
          </a>
        </li>
        <li>
          <a href="https://chat.vuejs.org" target="_blank" rel="noopener">
            Community Chat
          </a>
        </li>
        <li>
          <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">
            Twitter
          </a>
        </li>
        <li>
          <a href="https://news.vuejs.org" target="_blank" rel="noopener">
            News
          </a>
        </li>
      </ul>
      <h3>Ecosystem</h3>
      <ul>
        <li>
          <a href="https://router.vuejs.org" target="_blank" rel="noopener">
            vue-router
          </a>
        </li>
        <li>
          <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">
            vuex
          </a>
        </li>
        <li>
          <a
            href="https://github.com/vuejs/vue-devtools#vue-devtools"
            target="_blank"
            rel="noopener"
          >
            vue-devtools
          </a>
        </li>
        <li>
          <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">
            vue-loader
          </a>
        </li>
        <li>
          <a
            href="https://github.com/vuejs/awesome-vue"
            target="_blank"
            rel="noopener"
          >
            awesome-vue
          </a>
        </li>
      </ul>
    </template>

    <div>
      <div v-for="(item, index) in list" :key="index">
        id: {{ item.id }} name: {{ item.name }} age: {{ item.age }}
      </div>
    </div>

    <slot />

    <slot name="test1" />

    <slot name="testParam" :param="`坐标${x},${y}`" />

    <h1>x：{{ x }} y：{{ y }}</h1>

    <div class="flex justify-content-center">
      <span class="label">输入：</span>
      <input v-model="text" type="text" @input="handleInput" />
      {{ text }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { MsgProp, ConfigProp, ListProp } from "./type";
import position from "@/mixins/position";

export default defineComponent({
  name: "HelloWorldByTemplate",

  mixins: [position],

  props: {
    msg: {
      type: String as PropType<MsgProp>,
      default: "",
    },
    config: {
      type: Object as PropType<ConfigProp>,
      default: (): ConfigProp => ({
        isShowLink: false,
      }),
    },
    list: {
      type: Array as PropType<ListProp>,
      default: (): ListProp => [],
    },
  },

  data() {
    return {
      text: "",
    };
  },

  watch: {
    text(newVal) {
      this.$emit("handleInput", newVal);
    },
  },

  methods: {
    handleInput(event: Event) {
      const e = event as InputEvent;
      console.log(e, (e.target as HTMLInputElement).value);
    },
    handleInputClear() {
      this.text = "";
    },
  },
});
</script>

<style lang="scss" scoped>
.HelloWorldByTemplate {
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }

  .label {
    @include ellipsis;
  }
}
</style>
